<template>
  <div class="big-screen-container">
    <!-- 顶部标题 -->
    <div class="header">
      <div class="header-title">智能大屏数据中心</div>
      <!-- 全屏按钮 -->
      <div class="fullscreen-btn" @click="toggleFullscreen">
        <svg v-if="!isFullscreen" viewBox="0 0 24 24" width="24" height="24">
          <path
            fill="currentColor"
            d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
          />
        </svg>
        <svg v-else viewBox="0 0 24 24" width="24" height="24">
          <path
            fill="currentColor"
            d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
          />
        </svg>
      </div>
    </div>

    <!-- 顶部数据卡片 -->
    <div class="card-row">
      <div class="data-card">
        <div class="card-title">这里是标题1</div>
        <div class="card-value">6890.69</div>
        <div class="card-unit">元</div>
        <div class="card-desc">
          <span>小标题：文字</span>
          <span>小标题：文字</span>
        </div>
      </div>
      <div class="data-card">
        <div class="card-title">这里是标题2</div>
        <div class="card-value">6090.99</div>
        <div class="card-unit">元</div>
        <div class="card-desc">
          <span>小标题：文字</span>
          <span>小标题：文字</span>
        </div>
      </div>
      <div class="data-card">
        <div class="card-title">这里是标题3</div>
        <div class="card-value">2890.39</div>
        <div class="card-unit">元</div>
        <div class="card-desc">
          <span>小标题：文字</span>
          <span>小标题：文字</span>
        </div>
      </div>
      <div class="data-card">
        <div class="card-title">这里是标题4</div>
        <div class="card-value">7590.15</div>
        <div class="card-unit">元</div>
        <div class="card-desc">
          <span>小标题：文字</span>
          <span>小标题：文字</span>
        </div>
      </div>
    </div>

    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 柱状图 -->
        <div class="chart-container">
          <div class="chart-header">这里是标题</div>
          <div class="chart-box" ref="barChart"></div>
        </div>

        <!-- 折线图 -->
        <div class="chart-container">
          <div class="chart-header">这里是标题</div>
          <div class="chart-box" ref="lineChart"></div>
        </div>
      </div>

      <!-- 中间面板 -->
      <div class="center-panel">
        <!-- 进度条区域 -->
        <div class="progress-container">
          <div class="chart-header">这里是标题</div>
          <div class="progress-list">
            <div class="progress-item">
              <div class="progress-info">
                <span class="progress-dot" style="background: #ff6b9d"></span>
                <span class="progress-label">第一名</span>
              </div>
              <div class="progress-bar">
                <div
                  class="progress-fill"
                  style="width: 98.5%; background: linear-gradient(90deg, #ff6b9d, #ff8fab)"
                ></div>
              </div>
              <span class="progress-value">98.5%</span>
            </div>
            <div class="progress-item">
              <div class="progress-info">
                <span class="progress-dot" style="background: #ffd93d"></span>
                <span class="progress-label">第二名</span>
              </div>
              <div class="progress-bar">
                <div
                  class="progress-fill"
                  style="width: 88.5%; background: linear-gradient(90deg, #ffd93d, #ffed4a)"
                ></div>
              </div>
              <span class="progress-value">88.5%</span>
            </div>
            <div class="progress-item">
              <div class="progress-info">
                <span class="progress-dot" style="background: #ff9500"></span>
                <span class="progress-label">第三名</span>
              </div>
              <div class="progress-bar">
                <div
                  class="progress-fill"
                  style="width: 68.5%; background: linear-gradient(90deg, #ff9500, #ffb347)"
                ></div>
              </div>
              <span class="progress-value">68.5%</span>
            </div>
            <div class="progress-item">
              <div class="progress-info">
                <span class="progress-dot" style="background: #6bcf7f"></span>
                <span class="progress-label">第四名</span>
              </div>
              <div class="progress-bar">
                <div
                  class="progress-fill"
                  style="width: 40.5%; background: linear-gradient(90deg, #6bcf7f, #85d996)"
                ></div>
              </div>
              <span class="progress-value">40.5%</span>
            </div>
            <div class="progress-item">
              <div class="progress-info">
                <span class="progress-dot" style="background: #b794f6"></span>
                <span class="progress-label">第五名</span>
              </div>
              <div class="progress-bar">
                <div
                  class="progress-fill"
                  style="width: 22.5%; background: linear-gradient(90deg, #b794f6, #d6bcfa)"
                ></div>
              </div>
              <span class="progress-value">22.5%</span>
            </div>
          </div>
        </div>

        <!-- 数据统计卡片 -->
        <div class="stats-container">
          <div class="chart-header">这里是标题</div>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-value">23</div>
              <div class="stat-label">今日收益比例</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">107</div>
              <div class="stat-label">本月收益比例</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">107</div>
              <div class="stat-label">历史收益比例</div>
            </div>
          </div>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-value">23</div>
              <div class="stat-label">今日活跃比例</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">23</div>
              <div class="stat-label">本月活跃比例</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">23</div>
              <div class="stat-label">历史活跃比例</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <!-- 饼图 -->
        <div class="chart-container">
          <div class="chart-header">这里是标题</div>
          <div class="chart-box" ref="pieChart"></div>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
          <div class="chart-header">这里是标题</div>
          <div class="table-content">
            <table class="data-table">
              <thead>
                <tr>
                  <th>用户</th>
                  <th>类型号</th>
                  <th>类别一</th>
                  <th>类别二</th>
                  <th>类别三</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>张三</td>
                  <td>15</td>
                  <td>类别一</td>
                  <td>类别二</td>
                  <td>类别三</td>
                </tr>
                <tr>
                  <td>张三</td>
                  <td>16</td>
                  <td>类别一</td>
                  <td>类别二</td>
                  <td>类别三</td>
                </tr>
                <tr>
                  <td>张三</td>
                  <td>11</td>
                  <td>类别一</td>
                  <td>类别二</td>
                  <td>类别三</td>
                </tr>
                <tr>
                  <td>张三</td>
                  <td>12</td>
                  <td>类别一</td>
                  <td>类别二</td>
                  <td>类别三</td>
                </tr>
              </tbody>
            </table>
            <div class="table-footer">
              <span>更多</span>
              <span>精美大屏</span>
              <span>关注</span>
              <span>公众号</span>
              <span>DreamCoder</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const barChart = ref(null)
const lineChart = ref(null)
const pieChart = ref(null)
const isFullscreen = ref(false)

// 初始化柱状图
const initBarChart = () => {
  const chart = echarts.init(barChart.value)
  const option = {
    grid: {
      left: '5%',
      right: '5%',
      top: '10%',
      bottom: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: [
        '1日',
        '2日',
        '3日',
        '4日',
        '5日',
        '6日',
        '7日',
        '8日',
        '9日',
        '10日',
        '11日',
        '12日',
        '13日',
        '14日',
        '15日',
      ],
      axisLine: {
        lineStyle: { color: '#00eaff' },
      },
      axisLabel: {
        color: '#fff',
      },
    },
    yAxis: {
      type: 'value',
      max: 500,
      axisLine: {
        lineStyle: { color: '#00eaff' },
      },
      axisLabel: {
        color: '#fff',
      },
      splitLine: {
        lineStyle: { color: '#1e3a8a', type: 'dashed' },
      },
    },
    series: [
      {
        data: [200, 180, 170, 220, 280, 320, 300, 120, 450, 320, 100, 180, 140, 160, 200],
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#00eaff' },
            { offset: 1, color: '#0066cc' },
          ]),
        },
        barWidth: '60%',
      },
    ],
  }
  chart.setOption(option)
}

// 初始化折线图
const initLineChart = () => {
  const chart = echarts.init(lineChart.value)
  const option = {
    grid: {
      left: '5%',
      right: '5%',
      top: '10%',
      bottom: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
      axisLine: {
        lineStyle: { color: '#00eaff' },
      },
      axisLabel: {
        color: '#fff',
      },
    },
    yAxis: {
      type: 'value',
      max: 700,
      axisLine: {
        lineStyle: { color: '#00eaff' },
      },
      axisLabel: {
        color: '#fff',
      },
      splitLine: {
        lineStyle: { color: '#1e3a8a', type: 'dashed' },
      },
    },
    series: [
      {
        name: '折线一',
        data: [300, 200, 150, 200, 350, 600, 300],
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#ff6b9d',
          width: 3,
        },
        itemStyle: {
          color: '#ff6b9d',
        },
      },
      {
        name: '折线二',
        data: [200, 150, 100, 120, 180, 200, 180],
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#00eaff',
          width: 3,
        },
        itemStyle: {
          color: '#00eaff',
        },
      },
    ],
  }
  chart.setOption(option)
}

// 初始化饼图
const initPieChart = () => {
  const chart = echarts.init(pieChart.value)
  const option = {
    legend: {
      orient: 'vertical',
      right: '10%',
      top: 'center',
      textStyle: {
        color: '#fff',
      },
      data: ['西安', '苏州', '郑州', '常州', '徐州'],
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        data: [
          { value: 335, name: '西安', itemStyle: { color: '#00eaff' } },
          { value: 310, name: '苏州', itemStyle: { color: '#ffd93d' } },
          { value: 234, name: '郑州', itemStyle: { color: '#ff6b9d' } },
          { value: 135, name: '常州', itemStyle: { color: '#6bcf7f' } },
          { value: 148, name: '徐州', itemStyle: { color: '#b794f6' } },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        label: {
          show: true,
          color: '#fff',
        },
      },
    ],
  }
  chart.setOption(option)
}

// 全屏功能
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    // 进入全屏
    document.documentElement
      .requestFullscreen()
      .then(() => {
        isFullscreen.value = true
      })
      .catch((err) => {
        console.error('无法进入全屏模式:', err)
      })
  } else {
    // 退出全屏
    document
      .exitFullscreen()
      .then(() => {
        isFullscreen.value = false
      })
      .catch((err) => {
        console.error('无法退出全屏模式:', err)
      })
  }
}

// 监听全屏状态变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
}

onMounted(() => {
  initBarChart()
  initLineChart()
  initPieChart()

  // 监听全屏状态变化
  document.addEventListener('fullscreenchange', handleFullscreenChange)
})

onUnmounted(() => {
  // 清理事件监听器
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
})
</script>

<style scoped>
.big-screen-container {
  background: linear-gradient(135deg, #0a1a3c 0%, #1a237e 100%);
  min-height: 100vh;
  padding: 20px;
  color: #fff;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.fullscreen-btn {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.2), rgba(0, 234, 255, 0.1));
  border: 2px solid #00eaff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #00eaff;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 234, 255, 0.3);
}

.fullscreen-btn:hover {
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.3), rgba(0, 234, 255, 0.2));
  box-shadow: 0 0 25px rgba(0, 234, 255, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.fullscreen-btn svg {
  transition: transform 0.3s ease;
}

.fullscreen-btn:hover svg {
  transform: scale(1.2);
}

.header-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #00eaff;
  text-shadow: 0 0 20px rgba(0, 234, 255, 0.5);
  position: relative;
}

.header-title::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00eaff, transparent);
}

.header-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00eaff, transparent);
}

.card-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
}

.data-card {
  background: linear-gradient(135deg, rgba(0, 42, 102, 0.8) 0%, rgba(26, 35, 126, 0.8) 100%);
  border: 2px solid #00eaff;
  border-radius: 12px;
  padding: 20px;
  flex: 1;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 234, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.data-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00eaff, #ff6b9d, #ffd93d);
}

.card-title {
  font-size: 1.1rem;
  color: #b0bec5;
  margin-bottom: 10px;
}

.card-value {
  font-size: 2.5rem;
  color: #00eaff;
  font-weight: bold;
  margin-bottom: 5px;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
}

.card-unit {
  font-size: 1rem;
  color: #90a4ae;
  margin-bottom: 15px;
}

.card-desc {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #78909c;
}

.main-content {
  display: flex;
  gap: 20px;
  height: calc(100vh - 300px);
}

.left-panel,
.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-panel {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-container,
.progress-container,
.stats-container,
.table-container {
  background: linear-gradient(135deg, rgba(0, 42, 102, 0.8) 0%, rgba(26, 35, 126, 0.8) 100%);
  border: 2px solid #00eaff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 234, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.chart-container::before,
.progress-container::before,
.stats-container::before,
.table-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00eaff, #ff6b9d, #ffd93d);
}

.chart-header {
  font-size: 1.2rem;
  color: #00eaff;
  margin-bottom: 15px;
  text-align: center;
  font-weight: bold;
}

.chart-box {
  height: 200px;
  width: 100%;
}

.progress-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.progress-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
}

.progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.progress-label {
  font-size: 0.9rem;
  color: #fff;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-value {
  font-size: 0.9rem;
  color: #00eaff;
  font-weight: bold;
  min-width: 50px;
  text-align: right;
}

.stats-grid {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  color: #00eaff;
  font-weight: bold;
  margin-bottom: 5px;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
}

.stat-label {
  font-size: 0.9rem;
  color: #b0bec5;
}

.table-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  flex: 1;
}

.data-table th,
.data-table td {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 234, 255, 0.3);
}

.data-table th {
  background: rgba(0, 234, 255, 0.1);
  color: #00eaff;
  font-weight: bold;
}

.data-table td {
  color: #fff;
}

.data-table tr:hover {
  background: rgba(0, 234, 255, 0.1);
}

.table-footer {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  border-top: 1px solid rgba(0, 234, 255, 0.3);
  font-size: 0.9rem;
  color: #b0bec5;
}
</style>
